<template>
	<el-container>
		<el-header class="titlebar" height="40px">
			<div class="title">任务列表</div>
			<el-icon class="close" size="large" @click="closeWin">
				<el-icon-close />
			</el-icon>
		</el-header>

		<el-main style="flex:1;background-color: #f5f5f5;">
			<el-form inline>
				<el-form-item label="任务名称">
					<el-input placeholder="请输入任务名称" v-model="searchForm.taskName"></el-input>
				</el-form-item>
				<el-form-item label="任务状态">
					<el-select placeholder="请选择任务状态" v-model="searchForm.status" style="width: 200px;">
						<el-option label="已完成" value="1"></el-option>
						<el-option label="进行中" value="0"></el-option>
						<el-option label="失败" value="-1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getTaskPageData">查询</el-button>
					<el-button type="default" @click="resetSearchForm">重置</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="tableData" border stripe>
				<el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
				<el-table-column label="任务名称" prop="taskName" align="center"></el-table-column>
				<el-table-column label="状态" prop="status" align="center">
					<template #="{ row }">
						<el-tag type="success" v-if="row.status === 1">已完成</el-tag>
						<el-tag type="danger" v-if="row.status === -1">已失败</el-tag>
						<el-tag type="info" v-if="row.status === 0">进行中</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="createTime" :formatter="rendererDateTime"
					align="center"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="220">
					<template #="{ row }">
						<div style="display: flex; justify-content: space-evenly;">
							<el-link :underline="false" v-if="row.status == 1" type="primary" icon="Link"
								@click="downloadItem(row.downloadUrl)">下载</el-link>
							<el-link :underline="false" v-if="row.status == -1" type="danger"
								icon="ChatLineSquare">错误日志</el-link>
							<el-link :underline="false" v-if="row.status = 1 || -1" type="danger" icon="delete"
								@click="rmItem(row.id)">删除</el-link>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<el-footer>
			<XlxPagination v-model:currentPage="searchForm.current" v-model:pageSize="searchForm.size" :total="totals"
				@update:currentPage="getTaskPageData" @update:pageSize="updateSize">
			</XlxPagination>
		</el-footer>
	</el-container>
</template>

<script setup lang="ts">
import { getTaskDelApi, getTaskPageApi } from '@renderer/api/task';
import { TaskItem, TaskSearchForm } from '@renderer/interface/task';
import { tool } from '@renderer/utils/tool';
import { onMounted, ref } from 'vue';

//关闭窗口
const closeWin = () => {
	window.electron.ipcRenderer.invoke('renderer-to-task', {
		name: 'task-close'
	});
}

/* 分页列表 */
// 搜索表单
const searchFormValue = (): TaskSearchForm => ({
	current: 1,
	size: 7,
	taskName: '',
	status: undefined
})
const searchForm = ref<TaskSearchForm>(searchFormValue())
// 重置表单
const resetSearchForm = () => {
	searchForm.value = searchFormValue()
	getTaskPageData()
}
// 列表数据
const tableData = ref<TaskItem[]>([])
// 获取任务条目分页
const getTaskPageData = async () => {
	const { code, data } = await getTaskPageApi(searchForm.value)
	if (code !== '200') return

	tableData.value = data.records
	totals.value = data.total
}
// 转换时间戳
const rendererDateTime = (row: TaskItem) => {
	return tool.dateFormat(row.createTime)
}
// 下载某一任务
const downloadItem = (url: string) => {
	window.electron.ipcRenderer.invoke('renderer-to-task', {
		name: 'download-http-file',
		data: {
			url
		}
	})
}
// 删除某一任务
const rmItem = async (id: string) => {
	const { code } = await getTaskDelApi(id)
	if (code !== '200') return

	getTaskPageData()
	ElMessage({
		type: 'success',
		message: '删除成功~'
	})
}

/* 分页组件 */
// 分页条目总数
const totals = ref(0)
// 分页大小更新时
const updateSize = () => {
	searchForm.value.current = 1
	getTaskPageData()
}

/* 生命周期 */
onMounted(() => {
	getTaskPageData()
})
</script>

<style scoped>
.titlebar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	-webkit-app-region: drag;
	user-select: none;
}

.title {
	-webkit-app-region: no-drag;
	font-size: 14px;
	font-weight: bold;
	color: #3c4a54;
}

.close {
	-webkit-app-region: no-drag;
	cursor: pointer;
}

.el-table {
	font-size: 12px;
}
</style>